<!--  -->
<template>
  <div class="nav-bar">
    <div class="left"><slot name="left"></slot></div>
    <div class="center"><slot name="center"></slot></div>
    <div class="right"><slot name="right"></slot></div>
  </div>
</template>

<script>
export default {
  naem: 'NavBar',
  props: {
    bgcolor: {
      type: String,
      default() {
        return "#fff"
      }
    }
  }
}

</script>
<style scoped>
.nav-bar {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: #fff;
  /* box-shadow: 0 0 10px 0 hsl(0deg 6% 58% / 60%); */
  z-index: 999;
}
.left {
  left: 0;
  width: 40px;
}
.right {
  right: 0;
  width: 40px;
}
.center {
  flex: 1;
}
</style>